<template>
  <div class="container">
    <header class="header">
      <div class="admin">
        <i class="fas fa-user-shield"></i>
        <span>管理员</span>
      </div>
      <el-button type="primary" class="back-button" @click="goBack">
        <i class="fas fa-arrow-left"></i> 返回
      </el-button>
    </header>

    <main class="content">
      <section class="message-id">
        <div class="section-header">
          <i class="fas fa-hashtag"></i>
          <h3>留言ID：{{ backId }}</h3>
        </div>
      </section>

      <section class="comment-section">
        <div class="section-header">
          <i class="fas fa-comment"></i>
          <h3>留言内容</h3>
        </div>
        <div class="comment">{{ items.feedback }}</div>
      </section>

      <section class="response-section">
        <div class="section-header">
          <i class="fas fa-reply"></i>
          <h3>管理员回复</h3>
        </div>
        <div class="response">{{ items.response }}</div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      backId: "",
      items: {
        // feedBack: null, // 初始化 feedBack 属性
        // response: null  // 初始化 response 属性
      },
      commentContent: "",
      responseContent: "",
    };
  },
  created() {
    this.backId = this.$route.params.backId;
    this.fetchMessageDetails();
  },
  methods: {
    fetchMessageDetails() {
      this.$http
        .get("/getBackAndSpo", {
          params: {
            backId: this.backId,
          },
        })
        .then((result) => {
          console.log('获取的消息详情:', result.data);
          
          // 直接赋值
          this.items = result.data || {};
          
          // 确保数据存在
          this.commentContent = this.items.feedback || '暂无留言内容';
          this.responseContent = this.items.response || '暂无回复内容';
        })
        .catch(error => {
          console.error('获取消息详情失败:', error);
          this.commentContent = '获取留言失败';
          this.responseContent = '获取回复失败';
        });
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.admin {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #606266;
  font-size: 16px;
}

.admin i {
  color: #409EFF;
  font-size: 20px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 20px;
  transition: all 0.3s;
}

.back-button:hover {
  transform: translateX(-2px);
}

.content {
  padding: 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.section-header i {
  color: #409EFF;
  font-size: 18px;
}

.section-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
  font-weight: 500;
}

.message-id {
  margin-bottom: 30px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409EFF;
}

.comment-section,
.response-section {
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.comment,
.response {
  background-color: #f8f9fa;
  border: 1px solid #e4e7ed;
  padding: 16px;
  border-radius: 8px;
  color: #606266;
  line-height: 1.6;
  font-size: 14px;
  transition: all 0.3s;
}

.comment:hover,
.response:hover {
  border-color: #c0c4cc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.response {
  white-space: pre-wrap;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}

@media screen and (max-width: 768px) {
  .container {
    padding: 10px;
  }

  .content {
    padding: 16px;
  }

  .header {
    padding: 12px 16px;
  }

  .section-header h3 {
    font-size: 16px;
  }
}
</style>
